<div sv-root
  sv-part="state.sheet"
  sv-on-sort="dropCell($item, $partFrom, $partTo, $indexFrom, $indexTo)"
  >

  <div sv-element
    ng-repeat="cell in state.sheet track by $index"
    class="chart-container col-md-{{12 / state.columns}} col-sm-12 col-xs-12"
    timelion-grid timelion-grid-rows="state.rows"
    ng-click="onSelect($index)"
    ng-class="{active: $index === state.selected}"
    kbn-accessible-click
    aria-label="Timelion chart {{$index + 1}}"
    aria-current="{{$index === state.selected}}"
    >

    <div chart="sheet[$index]" search="onSearch" interval="state.interval"></div>
    <div class="cell-actions">
      <div class="cell-id"><span>{{$index + 1}}</span></div>

      <button
        class="cell-action"
        ng-click="removeCell($index)"
        tooltip="Remove"
        tooltip-append-to-body="1"
        aria-label="Remove chart"
      >
        <span class="fa fa-remove"></span>
      </button>
      <button
        class="cell-action"
        tooltip="Drag to reorder"
        tooltip-append-to-body="1"
        sv-handle
        aria-label="Drag to reorder"
        tabindex="-1"
      >
        <span class="fa fa-arrows"></span>
      </button>
      <button
        class="cell-action"
        ng-click="transient.fullscreen = true"
        tooltip="Full screen"
        tooltip-append-to-body="1"
        aria-label="Full screen chart"
      >
        <span class="fa fa-expand"></span>
      </button>
    </div>
  </div>

</div>
